<template>
  <div>
      分类
      <h1>体重：{{$route.params.tizhong}}</h1>
      <h1>{{cname}}</h1>
  </div>
</template>

<script>
export default {
  name: '2209vueCategory',

  data() {
    return {
        msg:"你好",
        cid:"",//存储上个页面传来的路由参数
        aihao:"",
        cname:""
    };
  },
  // vue的有8个生命周期
  beforeCreate(){ //vue实例创建前
    // 创建前 组件实例的数组和函数都无法使用
    // 也无法操作dom
    // 应用场景： 
            // 但你可以通过 `this.$options.data` 来访问原始的 `data` 对象
            // `this.$options.inject` 来获取注入的属性或方法
            // 插件和扩展的初始化：如果你编写了 Vue 插件或扩展
            
      console.log(this.$options.data)
  },
  created(){ //vue实例创建后
    // 可以操作组件的data数据，操作methods函数
    // 无法操作dom元素

    // 应用场景：前后端交互，进入页面就发起的请求都放在created里完成
    console.log(this.msg)
    // vue路由传参有俩种方式params 和 query
    // 接受参数俩种 this.$route.params.属性
    //  this.$route.query属性
    console.log(this.$route)
    this.cid=this.$route.params.cid;
    console.log(this.cid);
    this.aihao=this.$route.params.myhobby;
    console.log(this.aihao);
    // query接收参数
    console.log(this.$route.query.myname)
    this.cname=this.$route.query.myname;
    console.log(this.$route.query.myhome)
    // 项目中下载插件 几乎不用-g 
    // -D 是--save-dev  npm i xxx --save-dev 是把依赖写入进devDependencies对象里面 是开发
    // -S 是--save 是把依赖写入进dependencies对象里面 
    // 是生产依赖
    // npm i xxx -D      就是 npm i xxx --save-dev
    // npm i xxx -S      就是 npm i xxx --save 
  },
  methods: {
    
  },
};
</script>